<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:100px;height:100px;position: absolute;left:0;top:40px;background: red;}
    </style>
</head>
<body>
    <input type="button" id="btn1" value="开始">
    <input type="button" id="btn2" value="停止">
    <div class="box1"></div>
</body>
<script src="../jquery.js"></script>
<script>
    $("#btn1").click(function(){
        $(".box1").delay(2000).animate({
            left:600
        }, 2000).delay(2000).animate({
            top:500
        }, 2000).delay(2000).animate({
            left:0
        }, 2000).animate({
            top:40
        }, 2000)
    })

    $("#btn2").click(function(){
        $(".box1").stop(true, false);
    })

    // stop的参数：是布尔值，分别控制不同的部分
    // 参数1：动画队列，true清除队列，false不清除队列
    // 参数2：当前动画，true立即运动到目标位置，false停在当前位置


    // delay的参数：是毫秒数，表示下一个动画延迟的时间

</script>
</html>